<template>
	<form @submit="form.submit($event,success)" :data-action="`/api/compareCheck/save?stationId=${param.id}`">
		
		<view class="plr10 pb10 grayBg" v-for="( item , index) in list" :key="index">
			
			<view class="pd5 grayBg" v-if="index == 0"></view>
			
			<view class="whiteBg">
				
				<view class="fixAutoNoPd middle ">
					<view class="w20 pl10 bb" @tap="remove(index)" v-if="list.length > 1">
						<view class="sIcon-subCircle main bold fz18"></view>
					</view>
					<view>
						<choosePicker title="项目名称" :name="`x${index}.name|项目名称`" 
						:maxlength="200" :list="factorList" :index="item.factorIndex" @factorChanged="factorChanged($event,index)" @change="changeFactor($event,index)"></choosePicker>
						<input type="text" :name='`x${index}.name|项目名称`'  v-model="item.factor" style="display: none;">
					</view>
				</view>
				
				<view class="fixAuto bb middle">
					<view class="w100">
						单位
					</view>
					<view>
						<input type="text" :name="`x${index}.unit|单位`" v-model="item.unit" maxlength="50" placeholder="请输入单位">
					</view>
				</view>
				
				<view class="fixAuto bb middle">
					<view class="w100">
						比对检测数据
					</view>
					<view>
						<input type="digit" :name="`x${index}.compareData|比对检测数据`" v-model="item.compareData" placeholder="请输入比对检测数据">
					</view>
				</view>
				
				<view class="fixAuto bb middle">
					<view class="w100">
						在线监测数据
					</view>
					<view>
						<input type="digit" :name="`x${index}.onlineData|在线监测数据`" v-model="item.onlineData" placeholder="请输入在线监测数据">
					</view>
				</view>
				
				<view class="fixAuto bb middle">
					<view class="w100">
						误差
					</view>
					<view>
						<input type="digit" :name="`x${index}.error|误差`" v-model="item.error" placeholder="请输入误差,单位%">
					</view>
					<view class="w30 text-right grey">
						%
					</view>
				</view>
				
				<view class="fixAuto bb middle">
					<view class="w100">
						标准限值
					</view>
					<view>
						<input type="digit" :name="`x${index}.standard|标准限值`" v-model="item.standard" placeholder="请输入标准限值">
					</view>
				</view>
				
				
				<view class="fixAuto bb middle">
					<view class="w100">
						比对结果
					</view>
					<view>
						<input type="text" :name="`x${index}.result|比对结果`" v-model="item.result" maxlength="200" placeholder="请输入比对结果">
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="grayBg plr10 pb10">
			<view class="text-right whiteBg flex ct ptb10 main" @tap="add">
				<view class="sIcon-addCircle  bold fz18 mr10"></view>
				<view>
					添加项目
				</view>
			</view>
		</view>
		
		
		
		<view class="plr10 grayBg pb10">
			<view class="whiteBg">
				<view class="fixAuto bb middle">
					<view class="w100">
						检测机构
					</view>
					<view>
						<input type="text" name="testing|检测机构" maxlength="100" placeholder="请输入检测机构">
					</view>
				</view>
				
				<view class="fixAuto bb middle">
					<view class="w100">
						检测报告号
					</view>
					<view>
						<input type="text" name="testingId|检测报告号" maxlength="100" placeholder="请输入检测报告号">
					</view>
				</view>
				
				<view class="plr100 pd30">
					<input name="total" :value="total" type="text" style="display: none;">
					<button form-type="submit" class="btn block rds23">
						保存记录
					</button>
				</view>
			</view>
		</view>
		
	</form>
	
</template>

<script>
	export default {
		data() {
			return {
				param:{id:"",type:1},
				factorList:["二氧化硫","氮氧化物","氧","一氧化碳","氯化氢","氟化物","温度","压力","流速","湿度","其他"],
				unitList:["mg/m³","mg/m³","%","mg/m³","mg/m³","mg/m³","℃","KPa","m/s","%",""],
				list : [] 
			}
		},
		computed:{
			isOtherFator : function(e){
				return this.factorList[this.factorIndex] == '其他' ;
			},
			total : function(e){
				return this.list.length ;
			},
		},
		
		onLoad(param) {
			this.param = param ;
			uni.setNavigationBarTitle({
				title: param.type==1?'实际水样比对试验':'CEMS比对校验记录'
			});
			if(this.param.type == 1){
				this.factorList = ["COD","PH","氨氮","总磷","总氮","流量","其他"] ;
				this.unitList = ["mg/L","m³/h","mg/L","mg/L","mg/L","m³/h",""];
			}
			this.factor = this.factorList[this.factorIndex] ;
			this.list.push({
				factorIndex : 0 ,
				unit : 'mg/m³' ,
				result:"",
				standard:"",
				error:"",
				onlineData:"",
				compareData:"" ,
				factor : "" 
			}) ;
		},
		
		methods: {
			add:function(e){
				this.list.push({
					factorIndex : 0 ,
					unit : 'mg/m³',
					result:"",
					standard:"",
					error:"",
					onlineData:"",
					compareData:"" ,
					factor : "" 
				}) ;
				// this.total = this.list.length ;
			},
			remove:function(index){
				this.list.splice(index,1);
				// this.total = this.list.length ;
			},
			changeFactor:function(e , index){
				this.list[index].factorIndex = e.index ;
				this.list[index].unit = this.unitList[e.index];
			},
			
			success:function(e){
				this.kit.goSuccessBack("保存成功");
			},
			
			factorChanged:function(e , index){
				this.$set( this.list[index] , 'factor' , e ) ;
				console.log("factorChangede: ",e);
			},
		}
	}
</script>

<style>
page{
	background-color: #fff;
}
.fixAuto{
	padding: 30upx 10upx;
}
</style>
